<template>

  <el-dialog :title="ProcessSubmitFormDialog" :visible.sync="ProcessSubmitFormDialogVisible" width="600px"
    :close-on-click-modal="false" :append-to-body="true">
    <el-form class="ProcessSubmitForm_class" ref="ProcessSubmitForm" :model="ProcessSubmitForm" :rules="rules">
      <el-row class="el-row">
        <el-col :span="16">
          <textarea v-model="ProcessSubmitForm.Remark" ref="ProcessSubmitForm.Remark" placeholder="请输入用户审批或办理意见"
            rows="7" style="resize: none;width: 100%;border: 1px solid gainsboro;"></textarea>
          <!--
            <el-select v-model="commonRemark" placeholder="选择常用意见">
              <el-option v-for="item in processFormData.remarkOptions" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            -->
        </el-col>
        <el-col :span="8">
          <el-table class="routerData-el-table" ref="singleTable" :data="processFormData.routerData"
            :show-header="false" size="mini" highlight-current-row @current-change="handleCurrentChange">
            <el-table-column property="routerName" show-overflow-tooltip></el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <template v-for="routerX in processFormData.routerData">

        <div v-if="routerX.id==0">
          <span>{{routerX.tag}}---{{routerX.id}}---{{routerX.routerName}}</span>
          <el-row class="el-row" v-for="userTask in routerX.userTasks" :key="routerX.id" v-show="el_row_router0">
            <submitFormUserSelect @userSelectEvent="initSelectUser" :userTaskName="userTask.userTaskName"
              :userChoiceType='userTask.userChoiceType' :userTaskId="userTask.userTaskId"
              :appointUser="userTask.appointUser" :appointUser_cn="userTask.appointUser_cn"
              :appointUser_dept="userTask.appointUser_dept" :appointCompany="userTask.appointCompany"
              :appointDept="userTask.appointDept" :appointTeam="userTask.appointTeam" :role="userTask.role"
              :orgField="userTask.orgField" :extendParams="userTask.extendParams">
            </submitFormUserSelect>
          </el-row>
        </div>
        <div v-else-if="routerX.id==1">
          <span>{{routerX.tag}}---{{routerX.id}}---{{routerX.routerName}}</span>
          <el-row class="el-row" v-for="userTask in routerX.userTasks" :key="routerX.id" v-show="el_row_router1">
            <submitFormUserSelect @userSelectEvent="initSelectUser" :userTaskName="userTask.userTaskName"
              :userChoiceType='userTask.userChoiceType' :userTaskId="userTask.userTaskId"
              :appointUser="userTask.appointUser" :appointUser_cn="userTask.appointUser_cn"
              :appointUser_dept="userTask.appointUser_dept" :appointCompany="userTask.appointCompany"
              :appointDept="userTask.appointDept" :appointTeam="userTask.appointTeam" :role="userTask.role"
              :orgField="userTask.orgField" :extendParams="userTask.extendParams">
            </submitFormUserSelect>
          </el-row>
        </div>
        <div v-else-if="routerX.id==2">
          <span>{{routerX.tag}}---{{routerX.id}}---{{routerX.routerName}}</span>
          <el-row class="el-row" v-for="userTask in routerX.userTasks" v-show="el_row_router2">
            <submitFormUserSelect @userSelectEvent="initSelectUser" :userTaskName="userTask.userTaskName"
              :userChoiceType='userTask.userChoiceType' :userTaskId="userTask.userTaskId"
              :appointUser="userTask.appointUser" :appointUser_cn="userTask.appointUser_cn"
              :appointUser_dept="userTask.appointUser_dept" :appointCompany="userTask.appointCompany"
              :appointDept="userTask.appointDept" :appointTeam="userTask.appointTeam" :role="userTask.role"
              :orgField="userTask.orgField" :extendParams="userTask.extendParams">
            </submitFormUserSelect>
          </el-row>
        </div>
      </template>


      <el-row>
        <el-col>
          {{processFormData.routerData}}
        </el-col>
      </el-row>

      <div class="bottom-button">
        <el-button type="primary" icon="el-icon-check" @click="submitForm">提交</el-button>
        <!--
        <el-button type="info" icon="el-icon-message" @click="saveForm">保存并关闭</el-button>
        <el-button type="warning" icon="el-icon-star-off" plain>保存为常用意见</el-button>
        -->
        <el-button icon="el-icon-close" @click="cancel">取 消</el-button>
      </div>

    </el-form>
  </el-dialog>


</template>

<script>
  //自定义组件
  import submitFormUserSelect from '@/components/oa/SubmitForm/index.vue'

  export default {
    name: "processForm",
    props: {
      //流程Key
      processKey: String,
      //文档ID
      docUnid: String,
      //taskId
      taskId: String,
      //运行参数
      paramsData: [],
      processFormData: {
        type: Object,
      },
    },
    components: {
      submitFormUserSelect
    },

    data() {
      return {
        ProcessSubmitForm: {},
        ProcessSubmitFormDialog: "流程提交",
        ProcessSubmitFormDialogVisible: this.$props.ProcessSubmitFormDialogVisible,
        el_row_router0: true,
        el_row_router1: false,
        el_row_router2: false,
        el_row_router3: false,
        el_row_router4: false,
        el_row_router5: false,
        el_row_router6: false,

        user_select_router: "",
        selectedUsers: [],
        rules: {},
        routerData: [],
        // 选中数组
        remarkOptions: [{
          value: '0',
          label: '选择常用意见'
        }, {
          value: '选项1',
          label: '请部门领导审核'
        }, {
          value: '选项2',
          label: '请市场部、财务部、综合部、大数据运营中心、采购部审核'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        commonRemark: '0',
      }
    },
    mounted() {

    },
    created() {
      //this.routerData.length = 0;

      for (let x = 0; x < this.processFormData.routerData.length; x++) {
        this.routerData.push({
          id: x,
          routerName: this.processFormData.routerData[x].routerName
        });
      }

    },
    methods: {
      initSelectUser(value) {
        let index = -1;
        for (let x = 0; x < this.selectedUsers.length; x++) {
          if (this.selectedUsers[x].userTaskId == value.userTaskId && this.selectedUsers[x].userTaskName == value
            .userTaskName) {
            index = x;
            break;
          }
        }
        console.log("index:" + index, value)
        if (index > -1)
          this.selectedUsers.splice(index, 1);
        this.selectedUsers.push(value);

        console.log("最终值：", this.selectedUsers)

      },
      //切换路径
      handleCurrentChange(currentRow, oldCurrentRow) {
        console.log(currentRow.id + "," + oldCurrentRow)
        this.user_select_router = currentRow.routerName;
        if (currentRow.id == 0) {
          this.el_row_router0 = true;
          this.el_row_router1 = false;
          this.el_row_router2 = false;
          this.el_row_router3 = false;
          this.el_row_router4 = false;
        } else if (currentRow.id == 1) {
          this.el_row_router0 = false;
          this.el_row_router1 = true;
          this.el_row_router2 = false;
          this.el_row_router3 = false;
          this.el_row_router4 = false;
          console.log("this.el_row_router1=" + this.el_row_router1)
        } else if (currentRow.id == 2) {
          this.el_row_router0 = false;
          this.el_row_router1 = false;
          this.el_row_router2 = true;
          this.el_row_router3 = false;
          this.el_row_router4 = false;
        } else if (currentRow.id == 3) {
          this.el_row_router0 = false;
          this.el_row_router1 = false;
          this.el_row_router2 = false;
          this.el_row_router3 = true;
          this.el_row_router4 = false;
        } else if (currentRow.id == 4) {
          this.el_row_router0 = false;
          this.el_row_router1 = false;
          this.el_row_router2 = false;
          this.el_row_router3 = false;
          this.el_row_router4 = true;
        }

      },
      //显示提交框
      showProcessFormDialog(visible) {
        this.ProcessSubmitFormDialogVisible = visible;
      },

      // 取消按钮
      cancel() {
        this.ProcessSubmitFormDialogVisible = false;

      },
      saveForm() {
        alert("我是保存按钮");
      },

      /** 提交按钮 */
      submitForm: function() {
        console.log("ProcessSubmitRemark:", this.$refs.ProcessSubmitRemark);
        console.log("user_select_router:", this.user_select_router);
        console.log("selectedUsers:", this.selectedUsers);
        for (let x = 0; x < this.selectedUsers.length; x++) {
          console.log(x + "->" + this.selectedUsers[x].userTaskId + "," + this.selectedUsers[x]
            .userTaskName + "," + this.selectedUsers[x]
            .selectedUser);
        }
        const data = {
          ProcessSubmitRemark: this.$refs.ProcessSubmitRemark,
          user_select_router: this.user_select_router,
          selectedUsers: this.selectedUsers,
          userTaskId: this.taskId
        }
        this.$emit('getProcessSubmitData', data)

        // this.$refs["form"].validate(valid => {
        //   if (valid) {
        //     if (this.form.id != undefined) {
        //       updateFileWord(this.form).then(response => {
        //         this.msgSuccess("修改成功");
        //         this.open = false;
        //         this.getList();
        //       });
        //     } else {
        //       addFileWord(this.form).then(response => {
        //         this.msgSuccess("新增成功");
        //         this.open = false;
        //         this.getList();
        //       });
        //     }
        //   }
        // });
      },

    },
    watch: {
      // routerData: function() {
      //   this.$nextTick(function() {
      //     this.$refs.singleTable.setCurrentRow(this.$refs.singleTable.data[0])
      //   })
      // }
    },


  }
</script>

<style>
  .ProcessSubmitForm_class .el-row {
    display: flex;
    padding-top: 10px;
    width: 100%;
  }

  .ProcessSubmitForm_class .el-row .fieldset {
    /* display: flex; */
    justify-content: center;
    width: 100%;
  }

  .ProcessSubmitForm_class .el-row .fieldset .legend {
    font-size: 14px;
    color: red;
  }

  .ProcessSubmitForm_class .el-row .fieldset .div_left {
    height: 200px;
    width: 60%;
    border: 1px solid gainsboro;
    float: left;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .ProcessSubmitForm_class .el-row .fieldset .div_mid {
    height: 200px;
    width: 40px;
    float: left;
    padding-top: 100px;
    text-align: center;
  }

  .ProcessSubmitForm_class .el-row .fieldset .div_right {
    height: 200px;
    width: 30%;
    float: left;
    padding-left: 8px;
    border: 1px solid gainsboro;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .ProcessSubmitForm_class .bottom-button {
    margin-top: 20px;
    width: 100%;
    text-align: right;
  }

  .ProcessSubmitForm_class .routerData-el-table {
    margin-left: 10px;
    width: 180px;
    border: 1px solid gainsboro;
    height: 110px;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .el-table__body tr.current-row>td {
    background-color: #8FBC8F !important;
  }
</style>
